<template>
  <div class="project-preview">
    <div class="scheme-cot" :class="{ 'scheme-cot-maximize': maximizeStatus }">
      <!-- <div style="width: 100%; height: 100%" v-if="['pdf'].includes(activeItem.suffix)">
        <embed :src="activeItem.previewLink" style="width: 100%; height: 100%" :key="activeItem.previewLink" />
      </div> -->
      <!-- <div style="width: 100%; height: 100%" v-else> -->
      <div style="width: 100%; height: 100%" v-show="office.includes(activeItem.suffix)">
        <!-- eslint-disable -->
        <r-preview
          id="preview"
          :src="activeItem.previewLink"
          :closeable="'false'"
          :isContain="'true'"
          @loaded="previewLoaded"
        ></r-preview>
        <!-- eslint-enable -->
      </div>
      <div class="preview-stop" v-show="!office.includes(activeItem.suffix) && activeItem">
        <span>{{ activeItem.originalFileName }}暂不支持预览</span>
        <span @click="downFilesOpen(activeItem.path, activeItem.originalFileName)">下载</span>
      </div>
      <div v-show="!office.includes(activeItem.suffix) && !activeItem" class="empty-preview">
        <el-empty />
      </div>
      <!-- </div> -->

      <!-- <div class="close-maximize" @click="() => (maximizeStatus = false)">
        <el-icon><CircleClose /></el-icon>
      </div> -->
    </div>
  </div>
</template>
<script lang="ts" setup name="preview">
import "@randevcx/ranui";
import { ref, inject, onMounted, onUnmounted } from "vue";
import mittBus from "@/utils/mittBus";
import { getProjectFilesPage } from "@/api/modules/project"; // getProjectPlanDetail
// import { PROJECT } from "@/constants";
import { downFilesOpen } from "@/utils/index";
// const globalStore = useGlobalStore();
// inject
const projectId = inject("projectId", ref(""));
/**hook */
// import { useHandleData } from "@/hooks/useHandleData";
// import { useDict } from "@/hooks/useDict";
// const { getDict } = useDict(["fileTypeId"]);
//变量
const planList = ref([]);
const activeItem = ref("");
const srcUrl = ref("");
const office = ref(["docx", "xlsx", "pptx", "doc", "xls", "ppt", "pdf"]); // "pdf"
const maximizeStatus = ref(false);
const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  },
  typeId: {
    type: String,
    default: ""
  }
});
// 方法
const getListProjectPlanFn = async () => {
  try {
    const { data } = await getProjectFilesPage({ projectId, currentPage: 1, pageSize: 1000 });
    planList.value = data.records || [];
    if (planList.value.length) {
      const obj = planList.value.find(item => item.typeId === props.typeId);
      if (obj) {
        getProjectPlanDetailFn(obj);
        mittBus.emit("ProjectPlanFile", obj);
      } else {
        mittBus.emit("ProjectPlanFile", {});
      }
    }
  } catch (e) {
    console.log(e);
  }
};
const getProjectPlanDetailFn = async data => {
  try {
    // const { data } = await getProjectPlanDetail({ id });
    // alert(decodeURIComponent(data.previewLink));
    // 添加后缀名
    const suffix = data.path.split(".");
    data.suffix = suffix[suffix.length - 1];
    // alert(data.suffix);
    // data.previewLink =
    //   "https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=KYIRtWKFzRUlMWzx50mz/20240528/us-east-1/s3/aws4_request&X-Amz-Date=20240528T063315Z&X-Amz-Expires=604800&X-Amz-SignedHeaders=host&X-Amz-Signature=d09ebfe16093b32b673275977a18e718fcf45b98f768fd6244656f3dba961055";
    if (office.value.includes(data.suffix)) {
      srcUrl.value =
        "https://view.officeapps.live.com/op/embed.aspx?src=" + encodeURIComponent(decodeURIComponent(data.previewLink));
    }
    activeItem.value = data;
    // alert(decodeURIComponent(data.previewLink));
    // alert(data.previewLink);
    // console.log(data);
  } catch (e) {
    console.log(e);
  }
};
const previewLoaded = () => {
  mittBus.emit("fileLoaded");
};
// 当前页全屏
// const maximize = () => {
//   maximizeStatus.value = true;
//   // globalStore.setGlobalState("maximize", true);
// };
mittBus.on("ProjectPlanRefresh", () => {
  getListProjectPlanFn();
});
onMounted(() => {
  getListProjectPlanFn();
});
onUnmounted(() => {
  mittBus.off("ProjectPlanRefresh");
});
</script>
<style lang="scss" scoped>
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
p {
  padding: 0;
  margin: 0;
}
i {
  font-style: normal;
}
.project-preview {
  position: relative;
  width: 100%;
  height: 100%;
  .scheme-cot {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0;
    height: 100%;
    overflow: hidden;
    background: #ffffff;
    iframe {
      background: #ffffff;
      border: 0;
    }
    #preview {
      --el-loading-color: var(--el-color-primary);
    }
    .preview-stop {
      display: flex;
      flex-flow: column nowrap;
      text-align: center;
      span:first-child {
        color: #e25e72;
      }
      span:last-child {
        margin-top: 10px;
        color: #333333;
        cursor: pointer;
        &:hover {
          color: $primary-color;
        }
      }
    }
  }
  .scheme-cot-maximize {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000000;
    display: block;
    width: 100%;
    height: 100%;
    background: #ffffff;
    .close-maximize {
      display: block;
    }
  }
  .close-maximize {
    position: fixed;
    top: 10px;
    right: 40px;
    z-index: 1000001;
    display: none;
    width: 30px;
    height: 30px;
    font-size: 16px;
    line-height: 30px;
    color: #333333;
    text-align: center;
    cursor: pointer;
  }
}
</style>
